import Taro, { Component } from '@tarojs/taro'
import { View, Text,Image } from '@tarojs/components'
import { AtSearchBar, AtDivider,AtTag } from 'taro-ui'
import './homeSearch.css'
import clean from '../../img/clean.png'
import app from '../../main.js';
import { resolve } from '_uri-js@4.2.2@uri-js';


export default class HomeSearch extends Component {

  config = {
    navigationBarTitleText: '搜索'
  }
  constructor () {
    super(...arguments)
    this.state = {
      //输入内容
      value: '',
      // 搜索历史
      arr:[],
      // 热门搜索
      arr2:[],
    }
  }
  //搜索框事件
  onChange (value) {
    this.setState({
      value: value
    })
  }
  //搜索 
  onActionClick(){
      let info = this.state.value
      let data = {content:info}
      if(info !== null && info !==''){
          //调用搜索接口 
          let method  = true;
          if(method){
              app.post('web/search_records/searchRecordsInsert', data, (res)=>{
                    this.getData()
              })
              app.navigateTo('../findDoctor/findDoctor'+'?keyword='+info)
            }else{
              app.navigateTo('../notFound/notFound')
          }
      }else{
          //跳转到404页面
            app.toast('搜索栏里空空如也哦~ 快输入您想要查询的信息吧 ^_^')
          }
      }
      // 搜索历史
      hisTag(content){
        this.setState({
          value:content
        },()=>{
          this.onActionClick()
        })
      }

  //搜索历史
  getData(){
    let me = this
    let data = {offset:0,length:10}
    app.get('web/search_records/searchRecordsList',data,function(res){
      // console.log('历史',res)
      me.setState({
        arr:res.data.result.list,
      })
    })
  }
  // 搜索热门
  getData2(){
    let me = this
    let data = {offset:0,length:10}
    app.get('web/search_records/hotSearchList',data,function(res){
      // console.log('热门',res.data.result.list)
      me.setState({
        arr2:res.data.result.list,
      })
    })
  }

  //清除历史
  clearAll(){
    let data = {}
    app.post('web/search_records/searchRecordsDelete', data, (res)=>{
      this.setState({
        arr:[]
      })
    })
  }
    
  componentDidMount(){
    this.getData()
    this.getData2()
  }
  

  render () {
    return (
        <View>
            <View className='top-Search'>
                <AtSearchBar
                className='searchStyle'
                placeholder='请输入医生姓名，医院，症状，眼病'
                value={this.state.value}
                onChange={this.onChange.bind(this)}
                onActionClick={this.onActionClick.bind(this)}
                />             
            </View> 
            <AtDivider className='search-divder' lineColor='#ccc' />
            <View className='history-title'>
                <View><Text className='title'>搜索历史</Text></View>
                <View onClick={()=>this.clearAll()}>
                    <Image className='title-image' src={clean}/>
                    <Text className='text'>清空历史</Text>
                </View>
            </View>
            {/* 搜索历史下饿内容 */}
            <View className='tags'>
                {this.state.arr.map((item)=>{
                    return <AtTag className='tagStyle' onClick={this.hisTag.bind(this,item.content)}>
                                  <Text className='text'>{item.content}</Text>
                           </AtTag>
                })}
            </View>
            <View className='history-title'>
                <View><Text className='title'>热门搜索</Text></View>
            </View>
                {/* 热门搜索下的内容 */}
            <View className='tags'>
                {this.state.arr2.map((item,index)=>{
                    return <AtTag className='tagStyle' onClick={this.hisTag.bind(this,item.content)}>
                                  <Text className='text'>{item.content}</Text>
                           </AtTag>
                })}
            </View>
        </View>
    )
  }
}